<template>
  <div class="scroll-dynamic" v-if="userList && userList.length > 0">
    <span class="d-none d-lg-block float-left">
    <span
        class="badge badge-danger mr-2 pr ftp2"><i class="fa fa-volume-up mr3"></i>平台动态<sup
        class="spinner-grow spinner-grow-sm ml-1 small"
        style=" width: .5rem; height: .5rem; "></sup>
    </span>
    </span>
    <ul style="margin-top: 0px;">
      <template v-for="(item,index) in userList">
        <li class="animate__animated animate__slideInUp" v-if="item.ptype==1" v-show="timercount == index">
          <a rel="bookmark" href="javascript:void(0);">
            <span><span class="fw">新用户：</span>【{{ item.nickname }}】</span>
            <span class="ml2"><span class="fw">注册本站</span> 注册时间：{{ formatMsgTime(item.createTime) }} </span>
          </a>
        </li>
        <li class="animate__animated animate__slideInUp" v-if="item.ptype==2" v-show="timercount == index">
          <a rel="bookmark" href="javascript:void(0);">
            <span><span class="fw">用户：</span>【{{ item.nickname }}】</span>
            <span class="ml2"><span class="fw">订阅会员</span> 订阅时间：{{ formatMsgTime(item.createTime) }} </span>
          </a>
        </li>
      </template>
    </ul>
  </div>
</template>
<script setup>
const userStore = useStore.userState()
const timercount = ref(0)
const userList = ref([])
const handleAutoScroll = () => {
  setInterval(() => {
    if (timercount.value == 9) {
      timercount.value = -1
    }
    timercount.value++
  }, 5000)
}

function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

const handleLoadData = async () => {
  const resp = await useStateUserApi()
  userList.value = shuffleArray(resp.data)
}



onMounted(() => {
  handleLoadData()
  handleAutoScroll()
})
</script>